<template>
  <div class="jianzhi">
    <div
      style="
        background: #fff;
        border-bottom: 1px solid #f7f8fa;
        padding: 0px 48px;
      "
    >
      <el-breadcrumb separator="/" style="height: 48px; line-height: 48px">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>建制营</el-breadcrumb-item>
        <el-breadcrumb-item>训练水平智能分析</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="headerBox">
      <div class="headerTit">东风15甲常规导弹旅：待战戒备状态</div>
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="训练水平评定" name="1"></el-tab-pane>
          <el-tab-pane label="大项演练分析" name="2"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="zbStyle" v-if="activeName == 1">
      <span class="zbStyletext">指标类型选择</span>
      <div
        @click="checkClick(index)"
        :class="{ checkStyle: true, checkStyleActive: checkActive == index }"
        v-for="(item, index) in checkList"
        :key="index"
      >
        {{ item }}
      </div>
    </div>
    <div class="zbStyle">
      <span class="zbStyletext">下级单位编制分类选择</span>
      <div
        @click="checkClickTwo(index)"
        :class="{ checkStyle: true, checkStyleActive: item.type == 2 }"
        v-for="(item, index) in checkListTwo"
        :key="index"
      >
        {{ item.text }}
      </div>
    </div>
    <div class="zbStyle" v-if="activeName == 2">
      <span class="zbStyletext">具体单位选择</span>
      <div
        @click="dwClick(index)"
        :class="{ checkStyle: true, checkStyleActive: item.type == 2 }"
        v-for="(item, index) in dwList"
        :key="index"
      >
        {{ item.text }}
      </div>
    </div>
    <JianzhiChild :activeName="activeName" ref="jianzhiChild" />
  </div>
</template>

<script>
// 建制营
import JianzhiChild from "./jianzhiChild.vue";
export default {
  name: "jianzhi",
  data() {
    return {
      activeName: "1",
      checkActive: 0,
      checkList: ["全部指标", "过程性指标", "阶段性指标"],
      checkListTwo: [
        {
          text: "全部营",
          type: 2,
        },
        {
          text: "发射营",
          type: 1,
        },
        {
          text: "技术营",
          type: 1,
        },
        {
          text: "通信营",
          type: 1,
        },
        {
          text: "作战保障营",
          type: 1,
        },
        {
          text: "综合保障营",
          type: 1,
        },
      ],
      dwList: [
        {
          text: "建制营1",
          type: 2,
        },
        {
          text: "建制营2",
          type: 1,
        },
        {
          text: "建制营3",
          type: 1,
        },
      ],
    };
  },
  components: {
    JianzhiChild,
  },
  updataed() {},
  mounted() {
    this.$nextTick(() => {
      this.$refs.jianzhiChild.yibiaopan();
      this.$refs.jianzhiChild.jdchengji();
      this.$refs.jianzhiChild.jdkoufen();
      this.$refs.jianzhiChild.wtfenxiLeft();
      this.$refs.jianzhiChild.zbpaiming();
      // this.$refs.jianzhiChild.leidaqushi();
    });
  },
  methods: {
    checkClickTwo(index) {
      this.checkListTwo[index].type =
        this.checkListTwo[index].type == 1 ? 2 : 1;
    },
    dwClick(index) {
      this.dwList[index].type = this.dwList[index].type == 1 ? 2 : 1;
    },
    checkClick(index) {
      this.checkActive = index;
    },
    handleClick() {
      for (var i = 0; i < this.checkListTwo.length; i++) {
        this.checkListTwo[i].type = 1;
        if (i == 0) {
          this.checkListTwo[i].type = 2;
        }
      }
      if (this.activeName == 1) {
        this.$nextTick(() => {
          this.$refs.jianzhiChild.yibiaopan();
          this.$refs.jianzhiChild.jdchengji();
          this.$refs.jianzhiChild.jdkoufen();
          this.$refs.jianzhiChild.wtfenxiLeft();
          this.$refs.jianzhiChild.zbpaiming();
        });
      } else {
        this.$nextTick(() => {
          this.$refs.jianzhiChild.yibiaopan();
          this.$refs.jianzhiChild.jdchengji();
          this.$refs.jianzhiChild.wtfenxiLeft();
          this.$refs.jianzhiChild.zbpaiming();
          this.$refs.jianzhiChild.leidaqushi();
        });
      }
    },
  },
};
</script>

<style scoped>
@import "./css/index.css";
</style>

